<template>
  <div class="consider" v-if="showConsider">
    <div class="considerbox">
      <div class="title" v-if="title!==''">
        {{title}}
      </div>
      <div class="text">
        {{ text }}
      </div>

      <div class="button">
        <button @click="noState">取消</button>
        <button @click="yesState">确认</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  props: {
    title: {
      type: String, // 标题提示文字
      default: ''
    },
    text: {
      type: String, // 正文提示文字
      default: ''
    }

  },
  data () {
    return {}
  },
  computed: {
    ...mapState(['showConsider'])
  },
  methods: {
    ...mapMutations(['meshowConsider']),
    // 弹出框取消
    noState () {
      // 隐藏模态框
      this.meshowConsider(false)
    },
    // 确认
    yesState () {
      // 子传父事件 传递一个参数true
      // 点击确认触发
      this.$emit('change', { state: true })
      // 隐藏模态框
      this.meshowConsider(false)
    }
  }
}
</script>

<style lang="scss" scoped>
.consider {
  display: block;
  z-index: 1000;
  width: 100vw;
  height: 100%;
  background: rgba(0,0,0,0.3);
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  .considerbox {
    z-index: 1001;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    padding: 10px;
    background: #fff;
    border-radius: 15px;
    .title {
      font-size: 16px;
      color: #000;
      font-weight: bold;
      text-align: center;
      padding-top: 15px;

    }
    .text {
      margin: 0 auto;
      padding-top: 15px;
      padding-bottom: 10px;
      text-align: center;
      font-size: 14px;
    }
    .button {
      padding: 20px;
      display: flex;
      justify-content: space-between;
      button {
        padding: 8px 25px;
        border-radius: 15px;
        border: none;
        font-weight: bold;
        cursor: pointer;
        &:nth-of-type(1) {
          background: rgb(220, 220, 220);
          color: #000;
          &:hover {
            background: rgb(185, 184, 184);
          }
        }
        &:nth-of-type(2) {
          background: rgba(255, 128, 0, 0.8);
          color: #fff;
          &:hover {
            background: #f60;
          }
        }
      }
    }
  }
}
</style>
